<template>
	<view class="content">

		<u-search @click="goPage()" :disabled="true" shape="square" bg-color="white"  placeholder="搜索" input-align="center" :show-action="false"></u-search>

	

		<view class="goods">
<<<<<<< HEAD
			<view class="good">
				<image class="goodImg" src="/static/center.png"></image>
				<view style="padding: 5px;">
					<view>标题测试标题</view>
					<view style="display: flex;justify-content: space-between;">
						<view style="color: red;">￥30.00</view>
						<view>
							<u-number-box color="red" v-model="value"></u-number-box>
						</view>
					</view>
=======
			<view class="good" v-for="item in arr">
				<view style="justify-content: center; display: flex;align-items: center;">
					<image class="goodImg" src="/static/center.png"></image>
>>>>>>> 3fd410fdf9a374c83bc50458ee3d1cd0405c57ae
				</view>
				<view style="flex: 1;padding: 15rpx;">
					<view>标题测试标题测试</view>
					<view style="display: flex;align-items: center; justify-content: space-between;width: 100%;">
						<view style="color: red;">￥30.00</view>
						<view class="handle-amount">
							<!--如果数量大于0，显示减号-->
							<view @click="minNum(item)" class="dec" v-if="item.count>0"></view>
							<!--
						    为了防止scroll-view组件内使用input卡顿的问题，先使用view组件显示数量，单击该组件，显示input输入框，并隐藏view组件，输入完成后使用@blur事件，隐藏input组件，显示view组件
						    -->

							<input v-if="item.count>0" :value="item.count" type="number" />
							<view class="inc" @click="addNum(item)"></view>
						</view>
					</view>
				</view>
			</view>


		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				title: 'Hello',
				arr: [{
						count: 0,
					},
					{
						count: 1,
					}, {
						count: 0,
					},
					{
						count: 0,
					}, {
						count: 0,
					}
				],

			}
		},
		onLoad() {

		},
		methods: {
			addNum(item) {
				item.count++;
			},
			minNum(item) {
				item.count--;
			},
			//alt q
			goPage() {
				uni.navigateTo({
					url: '/pages/search/search'
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	.logo {
		height: 200rpx;
		width: 200rpx;
		margin-top: 100rpx;
		margin-left: auto;
		margin-right: auto;
		margin-bottom: 50rpx;
	}

	.goods {
		margin-top: 20rpx;
		width: 100%;
		display: flex;
		// justify-content: space-around;
		flex-wrap: wrap;

		.good:nth-child(even) {
			margin-left: 35rpx;
		}
	}

	.good {
		background-color: white;
		width: 47%;
		border-radius: 10px;
		margin: 5px 0;



	}

	.goodImg {
		width: 200rpx;
		height: 300rpx;

	}

	.handle-amount {
		width: auto;
		height: 60rpx;
		display: flex;
		align-items: center;
		justify-content: flex-end;

	}

	.handle-amount .dec {
		width: 40rpx;
		height: 40rpx;
		background-image: url("~@/static/images/main/dec.png");
		background-size: 100%;
		background-position: center;
		background-repeat: no-repeat;
	}

	.handle-amount .inc {
		width: 40rpx;
		height: 40rpx;
		background-image: url("~@/static/images/main/inc.png");
		background-size: 100%;
		background-position: center;
		background-repeat: no-repeat;
	}

	.handle-amount .text {
		font-size: 28rpx;
		color: #333333;
		margin-right: 10rpx;
		margin-left: 10rpx;
		width: 50rpx;
		text-align: center;
	}

	.start-sell {
		width: 100%;
		height: auto;
		font-size: 24rpx;
		color: #999999;
	}

	.handle-amount input {
		width: 50rpx;
		height: 100%;
		text-align: center;
		margin-right: 10rpx;
		margin-left: 10rpx;
	}
</style>
